<template>
    <el-main>
        <div  style="display: flex; align-items: center;">
        <el-icon style="color: red;font-size: 40px" ><WarnTriangleFilled /> </el-icon>
        <div style="font-weight: bold; font-size: 25px;text-align: center ">出现体重异常的动物</div>
        </div>
        <div class="w-full" style="overflow-y: auto;">
            <el-table :data="animallist" style="width: 100% " height="330"   @row-click="selectAnimal">
                <el-table-column prop="id" label="编号" width="180"/>
                <el-table-column prop="name" label="名称" width="180"/>
                <el-table-column prop="type" label="类别" width="180" />
                <el-table-column prop="age" label="年龄"   width="180"/>
                <el-table-column prop="gender" label="性别"  width="180"/>
                <el-table-column prop="healthStatus" label="健康状态"  width="180">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.healthStatus === '1'">健康</el-tag>
                        <el-tag type="warning" v-if="scope.row.healthStatus === '2'">受伤</el-tag>
                        <el-tag type="danger" v-if="scope.row.healthStatus === '3'">肥胖</el-tag>
                        <el-tag type="danger" v-if="scope.row.healthStatus === '4'">生病</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="nowWeight" label="当前体重"  width="180"/>
                <el-table-column prop="keeperId" label="饲养员编号" width="180" />
                <el-table-column prop="bornTime" label="出生时间" width="250" />
                <el-table-column label="操作" width="400">
                    <template #default="scope">
                        <div class="flex flex-row gap-1 w-[1000px]">
                            <button class="bg-blue-500 text-white px-1 py-1 rounded-md hover:bg-element-hover-green"  @click="hanleMedical(scope.row)"  @click.stop>医疗预约</button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="items-center h-[600px]">
            <div style="font-weight: bold; font-size: 25px;text-align: center ">
                该动物最近七个时间段体重变化（kg)
            </div>
            <v-chart class="w-[2000px] h-[600px]" :option="option" />
        </div>
    </el-main>



  <!-- 医疗窗口-->
    <el-dialog v-model="isFlag.dialogVisbaleMedical"  title="医疗信息" width="500" center>
        <el-form >
            <el-form-item label="预约主题:" label-width="80px">
                <el-input v-model="newmedical.applicationTitle" ></el-input>
            </el-form-item>
            <el-form-item label="具体描述:" label-width="80px">
                <el-input type="textarea" :rows="10" v-model="newmedical.applicationDetail" style="height: 200px"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="isFlag.dialogVisbaleMedical = false">取消</el-button>
                <el-button type="primary" @click="saveMedical"  >确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import {
    LegendComponent,
    TooltipComponent,
    DatasetComponent,
    GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

import VChart, { THEME_KEY } from "vue-echarts";
import {reactive, ref} from "vue";
import axios, {request} from "axios";
import {ElMessage} from "element-plus";

use([
    LegendComponent,
    TooltipComponent,
    DatasetComponent,
    GridComponent,
    BarChart,
    CanvasRenderer
]);
const USER=JSON.parse(localStorage.getItem('user'));
const standard=[USER.type,1,2];


const animallist = ref([]);
function init(){
    axios.get('http://localhost:8080/animal/getwarning')
        .then(request =>{
            animallist.value = request.data
            console.log(animallist.value);
        })
}
init();

let newmedical = reactive({
    animalId:'',
    keeperId:'',
    applicationTitle:'',
    applicationDetail:'',
})

const isFlag = reactive({
    dialogVisbaleMedical:false,
})

// 检查字符串是否包含特殊字符的函数
function checkSpecialCharacters(input: string): boolean {
    // 此处可以根据需要定义特殊字符的规则，例如只允许中英文和数字，不允许特殊符号等
    const pattern = /[!@#$%^&*()+\=\[\]{};':"\\|,.<>\/?~]/;
    return pattern.test(input);
}

// 显示错误信息的弹窗
function showErrorMessage(message: string) {
    ElMessageBox.alert(message, '提示', {
        confirmButtonText: '确定',
    });
}
// 表单验证函数，确保主题不为空且不包含特殊字符
function validateFormMedical(tmpAnimal): boolean {
    if (tmpAnimal.applicationTitle.trim() === '') {
        showErrorMessage('预约主题不能为空');
        return false;
    }
    if (checkSpecialCharacters(tmpAnimal.applicationTitle)) {
        showErrorMessage('预约主题不能包含特殊字符');
        return false;
    }
    return  true
}
function hanleMedical(animal){
    newmedical.applicationDetail='';
    newmedical.applicationTitle='';

    isFlag.dialogVisbaleMedical=true
    newmedical.animalId=animal.id;
    newmedical.keeperId=animal.keeperId;
}

function saveMedical(){
    // 检查表单是否通过验证
    if (!validateFormMedical(newmedical)) {
        return; // 如果表单验证不通过，直接返回，不继续保存操作
    }
    axios.post('http://localhost:8080/medical/save',newmedical)
        .then(request =>{
            console.log(request.data)
            if (request.data){
                ElMessage({
                    message:'预约成功',
                    type:'success'
                })
                isFlag.dialogVisbaleMedical = false
                init();
            }
        })
}

init();


function selectAnimal(animalId){
    axios.get('http://localhost:8080/watch/getlist',{params: { id: animalId.id }})
        .then((response =>{
                option.value.series[0].data = response.data
                console.log(option.value.series[0].data)
            })
        )

}


import { LineChart } from 'echarts/charts'
use([GridComponent, LineChart, CanvasRenderer])

const option = ref({
    xAxis: {
        type: 'category',
        data: ['一', '二', '三', '四', '五', '六', '七']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [0],
            type: 'line'
        }
    ]
});
</script>
